<template>
  <div>
    <div class="list-btn">
      登录名:
      <Input v-model.trim="params.name" placeholder="请输入登录名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
     <div class="list-btn">
      姓名:
      <Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
     <div class="list-btn">
       商户名称:
       <Select v-model="params.merchant_id"  style="width:200px" clearable>
          <Option  v-for="(item,index) in merchantList" :key="index" :value="item.merchant_id">{{item.name}}</Option>
        </Select>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <!-- <div class="list-btn">
      <Button type="primary" @click="show = true;type = '新增商户';formRole={}">新增用户</Button>
    </div> -->
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.page = $event; getList(url)" @changePageSize="params.pageSize = $event; getList(url)"></page-button>
    <Modal
      v-model="show"
      title="编辑"
      width="500"
      :footer-hide="true"
      :closable="true"
      :mask-closable="false"
     >
      <Form ref="formRole" :model="formRole" :rules="rules" :label-width="110">
        <FormItem label="新密码" prop="pwd">
          <Input v-model.trim="formRole.pwd"   type="password" style="width: 200px" placeholder="请输入6位以上新密码"/>
        </FormItem>
        <FormItem label="确认密码" prop="second_pwd">
          <Input v-model.trim="formRole.second_pwd"  type="password" style="width: 200px" placeholder="请确认密码"/>
        </FormItem>
        <div style="text-align:right">
          <Button @click="show = false;"  style="margin-right:2px">取消</Button>
          <Button type = "primary" @click="editPwd">确定</Button>
        </div>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import listMixin from '../../../mixin/list'
  import pageList from '../../../template/listTemplate'
  import pageButton from '../../../template/pageBtnTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
    },
    data () {
      return {
        tag: {
          'title': '用户管理',
          'path': '/work/Admin/index'
        },
       show:false,
       formRole:{},
       rules:{
          pwd: [
            { required: true,   message: '请输入密码',trigger: 'blur'}
          ],
          second_pwd: [
            { required: true,   message: '请输入密码',trigger: 'blur'}
          ],
       },
       listTitle: [
        {
          title: "创建时间",
          key: "add_time",
          align: "center",
          minWidth:120,
        },
        {
          title: "登录名",
          key: "name",
          align: "center",
          minWidth:80,
        },
        {
          title: "姓名",
          key: "realname",
          align: "center",
          minWidth:80,
        },
        {
          title: "所属商户",
          key: "merchant_name",
          align: "center",
          minWidth:100,
          // render: (h, params) => {
          //   return h('div', params.row.phone ?  params.row.phone : '—')
          // }
        },
        {
          title: "状态",
          key: "status",
          minWidth:80,
          align: "center",
          render: (h, params) => {
            let text = '';
            let color = '';
            switch (params.row.status){
              case '0':
                text = "启用"
                color = "#19be6b"
                break;
              case '1':
                text = "禁用"
                color = "#ed4014"
                break;
            }
            return h('div', {
              style:{
                color: color,
                fontWeight:'600'
              }
            },text)
          }
        },
         {
          title: "操作",
          key: "action",
          minWidth:200,
          align:'center',
          render: (h, params) => {
            let btnType = "";
            let type = ""
            if(params.row.status == 0){
              btnType = '禁用';
              type = 'error'
            }else if(params.row.status == 1){
              btnType ='启用';
              type = 'success'
            }
            return h("div", [
               h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginRight: "6px",
                  },
                  on: {
                    click: () => {
                      this.show = true;
                      this.formRole = {};
                      this.formRole.id = params.row.id;
                      this.resetValidate('formRole');
                    }
                  }
                },
                '编辑'
              ),
                h(
                "Button",
                {
                  props: {
                    type: type,
                    size: "small",

                  },
                  style: {
                    marginRight: "6px",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: `<p>确定要${btnType}吗?</p>`,
                        onOk: () => {
                           let data = {
                            id:params.row.id,
                         };
                           this.$post('/admin/del', data)
                            .then((res) => {
                              if(res.code === 0){
                                console.log(res,'删除')
                                this.$Message.success(`${btnType}成功`);
                                this.getList(this.url);
                              }
                            }, (err) => {
                              console.log(err);
                            })
                        },
                        onCancel: () => {
                        }
                      });

                    }
                  }
                },
                btnType
              ),

            ]);
          }
        }
      ],
      list:[],
      url:'/admin/index',
      params: {
        page: 1,
        pageSize: 10
      },
      }
    },
    mounted() {
       this.getmerchantList();
    },
    methods: {
      editPwd(){
          this.$refs.formRole.validate((valid) => {
            if(valid){
              console.log('编辑密码');
              if(this.formRole.pwd == this.formRole.second_pwd){
                if(this.formRole.pwd.length < 6){
                  this.$Message.error('密码最少6位');
                }else{
                  this.$post('/merchant/auditPwd',this.formRole).then(res => {
                    if(res.code == 0){
                      console.log('编辑密码');
                      this.show = false;
                      this.resetValidate('formRole');
                      this.$Message.success("编辑成功");
                      this.getList(this.url)
                    }else{
                      this.$Message.error(res.msg);
                      this.show = false;
                      this.resetValidate('formRole');
                    }
                  })
                }
              }else{
                this.$Message.error('两次密码不一致');
              }
            }
          })
        },
      handleConfig(type,money){
        if(money){
          let data = {
            type:type,
            merchant_id:this.merchant_id,
            money:money
          }
          this.$post('/admin/money',data).then(res => {
            if(res.code == 0){
              // this.$Message.success(res.msg);
              this.show = false;
              this.resetValidate('formRole1');
              this.$Message.success("新增完成");
              this.getList(this.url)
            }else{
              this.$Message.error(res.msg);
              this.show = false;
              this.resetValidate('formRole1');
            }
         })
        }else{
          this.$Message.warning('不能为空')
        }

      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

  /deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
</style>
